<template>
	<view class="pages" v-if="identityData">
		<!-- 头部 -->
		<view class="pages_heard" :style="{height: `${search.top+search.height+10}px`}">
			<view class="pages_heardMain" :style="{top: `${search.top}px`,height: `${search.height}px`}">
				我的
			</view>
		</view>
		<!-- 信息框 -->
		<view class="user_message">
			<image class="user_messageImag Imag01" :style="{top: `${search.top-5}px`}" src="/static/img/adornIcon.png">
			</image>
			<image class="user_messageImag Imag02" src="/static/img/adornIcon_one.png"></image>
			<view class="user_messageBox" @click="goLogin">
				<view class="user_messageBoxLeft">
					<image mode="aspectFill" :src="user.avatar ? user.avatar : '/static/img/userTX.png'"></image>
				</view>
				<view class="user_messageBoxRight" v-if="user">
					<view class="user_messageBoxRightTop">
						<span>{{user.nickname ? user.nickname : '点击去完善信息'}}</span>
						<image src="/static/img/rightIcons.png"></image>
					</view>
					<view class="user_messageBoxRightBottom" v-if="isCommunityList">
						<span>VIP</span>
						<span>到期时间：{{user.communityList | ff_communityList}}</span>
					</view>
					<view class="user_messageBoxRightBottom" v-else>
						<p>暂未加入社群</p>
					</view>
				</view>
				<view class="user_messageBoxRight" v-else>
					<view class="user_messageBoxRightTop">
						<span>请登录</span>
						<image src="/static/img/rightIcons.png"></image>
					</view>
					<view class="user_messageBoxRightBottom">
						<p>登录后可完善您的个人资料</p>
					</view>
				</view>

			</view>
		</view>

		<!-- 功能列表 -->
		<view class="user_funBox" v-if="user">
			<view v-for="(item,index) in funData" :key="index">
				<view @click="goPath(item.path)" class="user_funItems"
					v-if="(index==0&&user.communityList.length!=0)||index!=0">
					<view class="user_funItemLeft">
						<image :src="item.url"></image>
					</view>
					<view class="user_funItemCenton">
						<p>{{item.name}}</p>
						<p>{{item.text}}</p>
					</view>
					<view class="user_funItemRight">
						<image src="/static/img/leftActionIcon.png"></image>
					</view>
				</view>
			</view>
		</view>
		<p class="pages_end">- 章鱼小数据·版权所有 -</p>

	</view>
</template>

<script>
	let that = null

	export default {
		components: {},
		data() {
			return {
				funData: [{
						url: '/static/img/associationIcon.png',
						name: '我的社群',
						text: '我加入的全部社群',
						path: '/package/myassociation/index'
						// myassociation
					},
					{
						url: '/static/img/intelligenceIcon.png',
						name: '我的情报',
						text: '我查阅过的全部情报',
						path: '/package/myIntelligence/index'
					},
					{
						url: '/static/img/courseIcon.png',
						name: '我的课程',
						text: '我的菜品课程',
						path: '/package/myCourse/index'
					},
					{
						url: '/static/img/orderIcon.png',
						name: '我的订单',
						text: '支付消费记录',
						path: '/package/myOrder/index'
					},
					{
						url: '/static/img/asRegardsIcon.png',
						name: '关于我们',
						text: '认识了解章鱼小数据',
						path: '/package/asRegards/index'
					}

				],
				isCommunityList: false,
				identityName: '',
				phone: ''
			}
		},
		/**
		 * 分享微信好友
		 */
		onShareAppMessage() {
			return {
				title: '加入老谭餐饮情报局看海量餐饮大数据',
				imageUrl: 'https://octopus-wxapp.oss-cn-hangzhou.aliyuncs.com/octopus/yxiao.png',
				path: `/pages/start/index`
			}
		},
		/**
		 * 分享微信朋友圈
		 */
		// onShareTimeline() {
		// 	return {
		// 		title: '加入老谭餐饮情报局看海量餐饮大数据',
		// 	}
		// },
		onLoad() {},
		onShow() {
			this.getInfoUser()
			this.initIdentityGetList();
		},
		// 
		// user.communityList.length
		watch: {
			'user.communityList': {
				handler(newName, oldName) {
					console.log('newName', newName)
					//执行代码
					if (newName.length) {
						this.isCommunityList = false;
						newName.forEach(item => {
							if (item.isCurrentCity) {
								this.isCommunityList = true;
							}
						})
					} else {
						this.isCommunityList = false;
					}




				},
				deep: true,
				immediate: true
			}
		},
		computed: {
			user() {
				return this.$store.state.user;
			},
			identityData() {
				return this.$store.state.identityData;
			},

		},
		filters: {
			ff_phone(val) {
				return that.$Tools.phoneHidden(val)
			},
			ff_identityId(val) {
				if (that.identityData) {
					let item = that.identityData.find(item => {
						return item.identityId == val
					});
					return item.identityName;
				}

			},
			ff_communityList(item) {
				console.log(item)
				let date = ''
				var year = ''
				var month = ''
				var day = ''
				item.forEach(nowItem => {
					if (nowItem.isCurrentCity) {
						date = new Date(nowItem.expireTime)
						year = date.getFullYear()
						month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1
						day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()
						console.log('year', year, month, day)
					}
				})
				let a = `${year}.${month}.${day}`;
				console.log('a', a)

				return a == '..' ? '该社群暂未解锁' : a
			}
		},
		methods: {
			goLogin() {
				if (!this.user) {
					this.getInfoUser()
				} else {
					this.goPath('/package/message/index');
				}
			},
			getInfoUser() {
				return new Promise((ress, rejj) => {
					if (!this.user) {
						let that = this;
						uni.showModal({
							title: '温馨提示',
							content: '亲，授权微信登录后才能正常使用小程序功能',
							success(res) {
								//如果用户点击了确定按钮
								if (res.confirm) {
									uni.getUserProfile({
										desc: '获取你的昵称、头像',
										success: res => {
											let {
												userInfo
											} = res
											console.log('userInfo---->', res)

											let req = {
												cityId: that.location ? that.location.id :
													'',
												avatar: userInfo.avatarUrl,
												nickname: userInfo.nickName,
											}
											uni.showLoading({
												title: '加载中',
												mask: true
											});
											that.$api.accountWxEditInfo(req).then(res => {
												if (res.code == 200) {
													that.$store.commit(
														'updatalocation', res.data
														.location);
													that.$store.commit('updataUser',
														res
														.data.user);
													uni.hideLoading()
													ress();
												}

											})
										},
										fail: res => {
											//拒绝授权
											uni.showToast({
												title: '您拒绝了请求,不能正常使用小程序',
												icon: 'error',
												duration: 2000
											});
										}
									});
								} else if (res.cancel) {
									//如果用户点击了取消按钮
									//console.log(3);
									uni.showToast({
										title: '您拒绝了请求,不能正常使用小程序',
										icon: 'error',
										duration: 2000
									});
								}
							}
						});

					}

				})
			},

			goPath(url) {
				console.log(url)
				uni.navigateTo({
					url
				})
			},

			initIdentityGetList() {
				this.$api.identityGetList().then(res => {
					if (res.code == 200) {
						this.$store.commit('updataIdentityData', res.data);
						if (this.user.identityId) {
							let item = res.data.find(item => {
								return item.identityId == this.user.identityId
							});
							this.identityName = item.identityName;
						}
						this.phone = this.$Tools.phoneHidden(this.user.phone)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		width: 100%;
		min-height: 100vh;
		background-color: #F5F5F5;
		border-top: .01rpx solid transparent;
		box-sizing: border-box;

		.pages_heard {
			width: 100%;
			background-color: transparent;
			position: fixed;
			z-index: 9;

		}

		.pages_heardMain {
			text-align: center;
			font-weight: bold;
			width: 100%;
			display: flex;
			position: absolute;
			align-items: center;
			justify-content: center;
		}

		.user_message {

			width: 100%;
			padding: 32rpx;
			height: 362rpx;
			display: flex;
			align-items: flex-end;
			border-radius: 0 0 24rpx 24rpx;
			background: linear-gradient(180deg, #fff9df, #fff);
			box-sizing: border-box;
			position: relative;
		}

		.user_messageImag {
			width: 64rpx;
			height: 82rpx;
			position: absolute;
		}

		.Imag01 {
			left: 64rpx;
		}

		.Imag02 {
			bottom: 32rpx;
			right: 32rpx;
		}

		.user_messageBox {
			display: flex;
			width: 100%;

		}

		.user_messageBoxLeft {
			flex: 0 0 136rpx;
			width: 136rpx;
			height: 136rpx;
			border: 5rpx solid #FFDA2D;
			overflow: hidden;
			border-radius: 50%;
			margin-right: 24rpx;
			box-sizing: border-box;

			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.user_messageBoxRight {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
		}

		.user_messageBoxRightTop {
			display: flex;
			align-items: center;

			span {
				display: inline-block;
				height: 44rpx;
				font-size: 32rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				line-height: 44rpx;
				color: #000000;
				margin-right: 4rpx;
			}

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.user_messageBoxRightBottom {
			p {
				font-size: 30rpx;
				font-family: DIN;
				color: #999999;
				letter-spacing: .5rpx;
			}

			span {
				display: inline-block;
				height: 40rpx;
				line-height: 40rpx;
			}

			span:nth-child(1) {
				background-color: #ffda2d;
				border-radius: 8rpx;
				font-size: 22rpx;
				font-family: 蘋方-簡;
				padding: 0 16rpx;
				margin-right: 8rpx;
			}

			span:nth-child(2) {
				font-size: 26rpx;
				font-family: DIN;
				font-weight: 500;
				color: #999999;
			}
		}

		.user_funBox {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			padding-bottom: 0;
		}

		.user_funItems {
			background-color: #fff;
			border-radius: 24rpx;
			box-sizing: border-box;
			padding: 24rpx;
			display: flex;
			margin-bottom: 24rpx;
		}

		.user_funItems:not(:first-child) {}

		.user_funItemLeft {
			width: 80rpx;
			height: 80rpx;
			margin-right: 16rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.user_funItemCenton {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			p:nth-child(1) {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 40rpx;
				color: #000000;
			}

			p:nth-child(2) {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #b8b8b8;
			}
		}

		.user_funItemRight {
			flex: 0 0 24rpx;
			display: flex;
			align-items: center;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.pages_end {
			margin: 32rpx 0;
			text-align: center;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #CCCCCC;
		}
	}
</style>
